<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" href="../css/vant.css">
	<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
	<style type="text/css">
		body {
			background-color: #FFFFFF;
		}

		.left_title {
			width: 1rem;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0.9rem;
			font-size: 0.14rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			overflow-y: scroll;
		}

		.left_tab .item {
			width: 100%;
			height: 0.96rem;
			display: flex;
			align-items: center;
		}

		.left_tab .item .item-father {
			display: flex;
			align-items: center;
			padding-left: 0.15rem;
			width: 100%;
		}

		.left_tab .item .item-father img {
			width: 0.16rem;
			height: 0.16rem;
		}

		.left_tab .item .item-father span {
			margin-right: auto;
			display: inline-block;
		}

		.item-body {
			display: none;
			/*height: 0;*/
			/*transition: height 0.5s;*/
		}

		.item-body .title {
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #005a93;
		}

		.hhh {
			display: block !important;
		}

		.item dt {
			width: 100%;
			height: 0.46rem;
			display: flex;
			padding-left: 0.15rem;
			align-items: center;
		}

		.item dd ul li {
			width: 100%;
			height: 0.46rem;
			display: flex;
			padding-left: 0.15rem;
			align-items: center;
			font-size: 0.12rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.item dt img {
			width: 0.16rem;
			height: 0.16rem;
		}

		.item dt .title {
			font-size: 0.14rem;
			line-height: 0.17rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-right: auto;
		}

		.active_child {
			background: rgba(0, 90, 147, 0.1);
			color: rgba(128, 128, 128, 1);
			position: relative;
		}

		.active_child::before {
			content: '';
			display: block;
			position: absolute;
			width: 0.02rem;
			height: 100%;
			background: rgba(0, 90, 147, 1);
			left: 0;
			top: 0;
		}

		.right-goods {
			width: calc(100vw - 1rem);
			margin-left: 1rem;
			margin-top: 0.9rem
		}

		.queshen {
			width: calc(100vw - 1rem);
			height: 100vh;
			position: fixed;
			right: 0;
			top: 2rem;
			z-index: 10;
			text-align: center
		}

		.right-goods .item {
			padding: 0.1rem 0.15rem 0.1rem 0.1rem;
			display: flex;
			margin-bottom: 0.11rem;
			/*align-items: center;*/
		}

		.right-goods .item .left .sign {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 43px;
			height: 18px;
			background: #4385EA;
			border-radius: 0px 4px 0px 4px;
		}

		.right-goods .item .left .sign .sign_title {
			width: 24px;
			height: 12px;
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 18px;
			text-align: center;
			margin: auto;
			vertical-align: center
		}

		.right-goods .item .left {
			width: 0.8rem;
			height: 0.8rem;
			flex-shrink: 0;
			margin-right: 0.1rem;
			border-radius: 0.04rem;
			position: relative;
		}

		.right-goods .item .left img {
			width: 0.8rem;
			height: 0.8rem;
			flex-shrink: 0;
			border-radius: 0.04rem;
		}

		.right-goods .item .right {
			width: 100%;
		}

		.right-goods .item .right .title {
			/*margin-bottom: 0.03rem;*/
			font-size: 0.14rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(46, 46, 46, 1);
			line-height: auto;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.right-goods .item .right .sku_wraper {
			margin-bottom: 0.06rem;
		}

		.right-goods .item .right .sku {
			background: rgba(239, 249, 255, 1);
			border-radius: 0.02rem;
			border: 1px solid rgba(0, 90, 147, 1);
			padding: 0.02rem 0.04rem;
			font-size: 0.11rem;
			line-height: 0.11rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 90, 147, 1);
			display: inline-block;
			margin-right: 0.06rem;
		}

		.price_wraper {
			display: flex;
			align-items: center;
			margin-top: 0.03rem;
		}

		.price_wraper .origin_price {
			font-size: 0.16rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #005a93;
			line-height: 0.16rem;
			margin-right: 0.05rem;
		}

		.price_wraper .vip_price {
			font-size: 0.16rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(233, 0, 0, 1);
			line-height: 0.16rem;
			margin-right: 0.05rem;
		}

		.price_wraper .vip_price .icon {
			font-size: 0.12rem;
		}

		.price_wraper .vip_price .price {
			font-size: 0.18rem;
		}

		.price_wraper .vip_price .price_fen {
			font-size: 0.16rem;
		}

		.price_wraper .origin_price .icon {
			font-size: 0.12rem;
		}

		.price_wraper .current_price {
			font-size: 0.10rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(179, 179, 179, 1);
			line-height: 0.14rem;
		}

		.aui-bar-nav {
			background-color: #005A93;
			color: #fff;
		}

		.aui-bar-nav .aui-btn {
			padding-right: 0;
			padding-left: 0.75rem;
		}

		.aui-bar-nav .aui-pull-left {
			height: 1.7rem;
			line-height: 1.7rem;
			background-color: #F5F5F5;
			border-radius: 0.25rem;
			width: calc(100vw - 3.25rem);
			width: -webkit-calc(100vw - 3.25rem);
		}
	</style>
</head>

<body>
	<div class="" id="app">
		<div style="position:fixed;top:0;right:0;z-index:9999;width:100%">
			<!-- id="aui-header" class="ming-bg-blue" style="position:fixed;top:0;right:0;z-index:9999;width:100%" -->
			<header class="aui-bar aui-bar-nav ming-bg-blue" tapmode onclick="openWin_Search()" style="padding-top:0.48rem;padding-bottom:0.06rem">
				<div class="aui-pull-left" style="width:92%;height:34px;line-height:34px;margin-left: 15px;border-radius: 30px;margin-right:25px;">
					<img style="width:14px;height:14px;display: inline-block;margin-left:10px;margin-right:2px" src="../image/btn/btn-search-new.svg" />
					<span style="font-size: 14px;color: #BBBBBB;font-family:PingFangSC-Regular;font-weight:400;">请输入关键词</span>
				</div>
			</header>
		</div>
		<!-- 左边标题 -->
		<div class="left_title">
			<dl class="item" v-for="(vo, index) in categoryList" :key="vo.id">
				<dt class="" @click="handelCategory(index, vo.id)">
					<div class="title">
						<div class="ellipsis" v-text="vo.name"></div>
					</div>
					<div class="">
						<img :src="index == categoryIndex ? '../image/icons/class-arrow-bottom.png':'../image/icons/class-arrow-right.png'"
							alt="">
					</div>
				</dt>
				<dd class="item-body" :class="{ 'hhh': index == categoryIndex }">
					<ul>
						<li class="title ellipsis" @click="handelChildCategory(key, val.id)" :class="{ 'active_child': key == categoryChildIndex  }" v-for="(val, key) in vo.child" :key="val.id" v-text="val.name"></li>
					</ul>
				</dd>
			</dl>

			<!--  -->
		</div>
		<!-- 右边商品信息 -->
		<div class="right-goods">
			<van-list style="min-height: 100vh" v-model="loading" :finished="finished" :immediate-check="false" :finished-text="dataList.length > 0 ? '已经到底了' : ''" @load="getList">
				<div class="item" v-for="(vo,index) in dataList" @click="openWin_goods_detail(vo.id)">
					<div class="left">
						<img :src="vo.cover" alt="">
						<div class="sign" v-if="vo.sign">
							<div class="sign_title">{{vo.sign}}</div>
						</div>
					</div>
					<div class="right">
						<div class="title" v-text="vo.title">

						</div>
						<div class="sku_wraper">
							<div class="sku" v-for="(val, key) in vo.service_name" :key="key" v-text="val">
							</div>
						</div>
						<div class="price_wraper">
							<div class="origin_price">
								<span class="icon">零售价:￥</span><span class="price">{{ vo.current_price }}</span><span style="font-size:12px">/{{vo.unit_name}}</span>
							</div>
							<!-- <div class="current_price">
									<del>
										<span class="icon">￥</span><span class="price">{{ vo.cost_price }}</span>
									</del>
								</div> -->
						</div>
						<div class="price_wraper" v-if="vo.vip_show>0">
							<div class="vip_price">
								<span class="icon">会员价:￥</span><span class="price">{{price_format('yuan',vo.vip_price)}}<span class="price_fen">.{{price_format('fen',vo.vip_price)}}</span></span><span style="font-size:12px">/{{vo.unit_name}}</span>
							</div>
						</div>
					</div>
				</div>
			</van-list>

			<!-- 缺省页面 -->
			<div class="aui-text-center queshen" v-if="nodata" tapmode>
				<img src="../image/bg/bg-nonecar.png" style="width:1.51rem;" />
				<div style="font-size:0.14rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:0.27rem;width:100%; text-align: center;">
					暂无数据
				</div>
			</div>


		</div>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/vant.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			systemVersion:'',
			categoryIndex: 0, //父级
			categoryChildIndex: -1, //子集
			categoryList: [], //分类
			categoryId: null, //分类id
			page: 1,
			dataList: [], //商品列表
			loading: false,
			finished: false,
			refreshing: false,
			nodata: false,
			localcity: {
				"id": 2608,
				"parentid": 235,
				"categoryname": "平邑县",
				"spell": "pingyixian",
				"first_letter": "P"
			},
		},

		methods: {
			price_format: function(type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},
			// 点击一级标题
			handelCategory: function(index, id) {
				vm.categoryIndex = index;
				vm.categoryChildIndex = -1;
				vm.categoryId = id;
				vm.page = 1;
				vm.dataList = [];
				backTop();
				vm.getList();
			},
			// 点击二级标题
			handelChildCategory: function(key, id) {
				// alert(key)
				// alert(id)
				vm.categoryChildIndex = key;
				vm.categoryId = id;
				vm.page = 1;
				vm.loading = true;
				vm.finished = true;
				vm.dataList = [];
				backTop();
				vm.getList();
			},
			// 类目
			getCategory: function() {
				get_data('api/GoodType/goodType', {}, function(result) {
					if (result.status) {
						if (result.data.length > 0) {
							vm.categoryList = result.data;
							// vm.handelCategory(0, result.data[0].id);
						}
					}
				}, false)
			},
			// 商品列表
			getList: function() {
				if (vm.refreshing) {
					vm.dataList = [];
					vm.refreshing = false;
				}
				vm.nodata = false;
				const params = {
					page: vm.page,
					good_type_id: vm.categoryId,
					region_name: vm.localcity.categoryname,
					token: $api.getStorage('token'),
				}
				get_data('api/Good/goodList', params, function(result) {
					// alert(vm.categoryId)
					// alert(JSON.stringify(result,null,2))
					// send_event('class_switch', {
					// 	id: vm.categoryId
					// })
					console.log(JSON.stringify(result.data))
					if (result.status) {
						if (result.data.length < 10) {
							vm.finished = true;
						};
						// vm.dataList = vm.dataList.concat([{"id":2030,"title":"未来世纪·白木浆石膏板","cover":"http://zm.zonmay.com/public/uploads/20220401/crop_e3530b2746aed6d874eab85d935b52c0.jpg","sign":"新品速递","cost_price":"0.00","current_price":"119.00","service_id":"3,7","unit_name":"张","vip_price":"89.90","good_type_id":7,"good_type_ids":"7,103","one_type_id":1,"one_type_ids":"1,31","vip_show":"89.90","service_name":["免费退换货","城区免费配送"]},{"id":108,"title":"多层细木工板","cover":"http://zm.zonmay.com/public/uploads/20220408/crop_d8f26218b4e1eb06d0a29855ab9b4f9a.jpg","sign":"热销产品","cost_price":"60.00","current_price":"65.00","service_id":"3,7","unit_name":"张","vip_price":"52.98","good_type_id":103,"good_type_ids":"23,103","one_type_id":31,"one_type_ids":"20,31","vip_show":"52.98","service_name":["免费退换货","城区免费配送"]}])
						let arr = vm.dataList.concat(result.data);
						console.log(JSON.stringify(arr))
						const newArr = arr.map(item=>item.title);
						console.log(JSON.stringify(newArr))
						const isRepeat=newArr.some((item,index,arr)=>arr.indexOf(item)!=index);
						if(isRepeat){
							console.log("重复");
						}else{
							vm.dataList = vm.dataList.concat(result.data);
						}


						if (vm.dataList.length == 0) {
							vm.nodata = true;
						}
						vm.loading = false;
					} else {
						vm.loading = false;
					}
				}, false)
			},
		},
	})

	apiready = function() {


        vm.systemVersion = api.systemVersion;
		// $api.fixStatusBar($api.byId('aui-header'))
		api.setStatusBarStyle({
			style: 'dark'
		});

		var temp_localcity = api.getPrefs({
			sync: true,
			key: 'localcity'
		});

		if (temp_localcity) {
			vm.localcity = JSON.parse(temp_localcity);
		}
		vm.page=1;
		vm.dataList=[];
		api.addEventListener({
			name: 'jobRefresh'
		}, function(ret, err) {
			localcity(function(ret) {
				if (ret) {
					vm.localcity = ret;
					vm.getCategory();
					vm.handelCategory(0, 103);
				}
			})
		});
        
		
		// 初始化一下分类
		vm.getCategory();
		vm.categoryId = 103;
		if(api.systemType !== 'ios'){
			vm.page=1;
			vm.dataList=[];
			vm.handelCategory(0, 103)
		}
		
		// api.openFrame({
		// 	name: 'class_frm',
		// 	url: 'class_frm.html',
		// 	rect: {
		// 		x: 50,
		// 		y: 50,
		// 		w: 300,
		// 		h: 500
		// 	},
		// })

		add_event('class_switch', function(ret) {
			if (ret && ret.id) {
			
				var index = -1;
				var id = ret.id;
				var categoryList = vm.categoryList;
				for (var i = 0; i < categoryList.length; i++) {
					if (categoryList[i].id == ret.id) {
						index = i;
					}
				}
				if (index > -1) {
					vm.page=1;
					vm.dataList=[];
					vm.handelCategory(index, id)
				}
			}
		});
	}

	//下拉显示返回顶部菜单
	window.onscroll = function() {
		var t = document.documentElement.scrollTop || document.body.scrollTop;
		if (t > 100) {
			vm.backTopShow = true
		} else {
			vm.backTopShow = false
		}
	}

	// 回到顶部
	function backTop() {
		document.documentElement.scrollTop = 0
		document.body.scrollTop = 0
	}
</script>

</html>
